<template>
  <div class="w-100 h-100">
    <containTemplete
      :title="'管廊设备监控'"
      :secondTitles="['监控中心统计', '设备基本信息', '廊舱内部环境监控']"
    >
      <template #left>
        <div class="w-100 h-100">
          <jkzx></jkzx>
        </div>
      </template>
      <template #middle>
        <div class="w-100 h-100">
          <sbjbxx></sbjbxx>
        </div>
      </template>
      <template #right_control>
        <div class="w-100 h-100 d-flex" style="height: 40px">
          <div style="width: 70px; line-height: 40px; height: 40px">
            监控范围
          </div>
          <el-select
            v-model="value"
            style="width: 100px; height: 40px"
            height="40px"
            placeholder="Select"
            size="large"
          >
            <el-option
              v-for="item in options"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            />
          </el-select>
          <el-date-picker
            style="width: 150px; height: 40px"
            v-model="value2"
            type="datetimerange"
            range-separator="至"
            :shortcuts="shortcuts"
            start-placeholder="开始"
            end-placeholder="结束"
          />
        </div>
      </template>
      <template #right>
        <div class="w-100 h-100">
          <lcnbhjjk></lcnbhjjk>
        </div>
      </template>
    </containTemplete>
  </div>
</template>

<script setup lang="ts">
import containTemplete from "@/components/project/containTemplete.vue";
import jkzx from "./jkzx.vue";
import sbjbxx from "./sbjbxx.vue";
import lcnbhjjk from "./lcnbhjjk.vue";

const value = ref("0");

const options = [
  {
    value: "0",
    label: "全部",
  },
  {
    value: "1",
    label: "在线",
  },
  {
    value: "2",
    label: "离线",
  },
];
</script>

<style scoped lang="less"></style>


